<template>
  <div>
    <el-card>
      <div>
        <!--主页视图区域-->
        <!--图片区域-->
        <div>
          <div class="condition">
            <div class="text1">填写条件</div>
          </div>
          <div class="bg-card">
            <el-form :inline="true">
              <el-form-item label="报废年份">
                <el-date-picker
                  style="width:180px;"
                  v-model="year"
                  type="year"
                  value-format="yyyy"
                  format="yyyy"
                  placeholder="选择年"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="报废月份">
                <el-date-picker
                  style="width:180px;"
                  v-model="month"
                  type="month"
                  placeholder="选择月"
                  format="MM"
                  value-format="MM"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="报废申请时间">
                <el-date-picker
                  v-model="scarpFillTime"
                  type="date"
                  format="yyyyMMdd"
                  value-format="yyyyMMdd"
                  :picker-options="pickerOptions"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item prop="scarpType" label="报废单状态">
                <el-select v-model="type" :value="1">
                  <el-option
                    v-for="item in typeOpt"
                    :key="item.index"
                    :label="item.value"
                    :value="item.index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="margin-top:28px" @click="fetch"
                  >查询</el-button
                >
                <el-button
                  type="success"
                  style="margin-top:28px"
                  @click="handleAdd"
                  >新增</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <br />
        <el-table :data="newlist" border style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="scarpNum"
            label="报废单号"
            align="center"
            width="230"
          ></el-table-column>
          <el-table-column label="年份" align="center">
            <template slot-scope="{ row }">
              <span>{{
                row.scarpFillTime ? row.scarpFillTime.substring(0, 4) : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="月份" align="center">
            <template slot-scope="{ row }">
              <span>{{
                row.scarpFillTime ? row.scarpFillTime.substring(4, 6) : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="warehouse" label="仓库名称" align="center">
            <template slot-scope="{ row }">
              <span>{{ goodsWareHouse[row.warehouse] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="scarpFillTime"
            label="报废申请时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="scarpPeople"
            label="经办人"
            align="center"
          ></el-table-column>
          <el-table-column prop="goodsStatus" label="报废状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsStatus === 0">待提交</span>
              <span v-if="scope.row.goodsStatus === 1">待审核</span>
              <span v-if="scope.row.goodsStatus === 2">通过</span>
              <span v-if="scope.row.goodsStatus === 3">退回</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="scarpSubPeople"
            label="审核人"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="scarpSubReason"
            label="审核意见"
            align="center"
          >
            <template slot-scope="scope">
              <span style="color:red">{{ scope.row.scarpSubReason }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="nightContent"
            label="操作"
            align="center"
            widthData="300"
            width="300"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="success"
                @click="handleEdit(scope.row)"
                size="mini"
                v-if="
                    scope.row.goodsStatus !== 1 &&
                    scope.row.goodsStatus !== 2 &&
                    scope.row.scarpPeople === userInfo.userName
                "
                >编辑</el-button
              >
              <el-button
                type="primary"
                @click="handlePrint(scope.row)"
                size="mini"
                >查看</el-button
              >
              <el-button
                type="warning"
                @click="handleView(scope.row, 1)"
                size="mini"
                v-if="
                  Number(isShow) === 2 &&
                    scope.row.goodsStatus !== 0
                "
              >
                {{ scope.row.goodsStatus === 1 ? "审核" : "重新审核" }}
              </el-button>
              <el-button
                type="warning"
                @click="handleDownload(scope.row.scarpNum)"
                size="mini"
                v-if="scope.row.goodsStatus === 2"
                >下载</el-button
              >
              <el-button
                type="danger"
                v-if="
                    scope.row.goodsStatus !== 1 &&
                    scope.row.goodsStatus !== 2 &&
                    scope.row.scarpPeople === userInfo.userName
                "
                @click="handleDel(scope.row)"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block" style="float:right;margin-bottom:10px">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import { table } from "@/mixin/table";
import { MessageBox } from "element-ui";
import FileSaver from "file-saver";
export default {
  mixins: [table],
  data: () => {
    return {
      query: {
        goodsName: "",
        goodsUnit: "",
        scarpFillTime: "",
        year: "",
        month: "",
        //status: 3,
        warehouse: 2
      },
      tableData: [],
      isShow: null,
      page: 1,
      userInfo: null,
      scarpFillTime: "",
      year: "",
      month: ""
    };
  },
  created() {},
  methods: {
    async fetch() {
      try {
        this.query.scarpFillTime = this.scarpFillTime;
        this.query.year = this.year;
        this.query.month = this.month;
        const res = await this.$http.post(
          "/restful/v1/dd/scarp/getScarpNumList",
          this.query
        );
        if (res.data.code === 1 && res.data.object) {
          this.tableData = res.data.object.dataList;
          // this.total = res.data.object.page.totalSize;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      } catch (error) {
        this.$message.error("服务器繁忙")
        console.log(error);
      }
    },
    handleAdd() {
      this.$router.push({
        path: "/home/storehouse2/edit2",
        query: {
          type: "add",
          scarpNum: ""
        }
      });
    },
    handlePrint(row) {
      // console.log(row);
      this.$router.push({
        path: "/home/storehouse1/detail3",
        query: {
          num: row.scarpNum,
          warehouse: row.warehouse,
          inboundFillTime: row.scarpFillTime
        }
      });
    },
    async handleDel(row) {
      if (row.goodsStatus === 0 || row.goodsStatus === 3) {
        MessageBox.confirm("此操作将删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            const res = await this.$http.post(
              `/restful/v1/dd/scarp/deleteScarpNum?scarpNum=${row.scarpNum}`
            );
            if (res.data.code === 1) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.fetch();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    handleEdit(row) {
      this.$router.push({
        path: "/home/storehouse2/edit2",
        query: {
          type: "edit",
          scarpNum: row.scarpNum,
          scarpFillTime: row.scarpFillTime
        }
      });
    },
    handleView(row, checkout) {
      this.$router.push({
        path: "/home/storehouse2/edit2",
        query: {
          type: "view",
          scarpNum: row.scarpNum,
          scarpFillTime: row.scarpFillTime,
          checkout
        }
      });
    },
    async handleDownload(scarpNum) {
      const { data } = await this.$http.get(
        `/restful/v1/dd/scarp/exportScarpExcel?scarpNum=${scarpNum}`,
        {
          responseType: "blob"
        }
      );
      try {
        FileSaver.saveAs(
          new Blob([data], { type: "application/octet-stream" }),
          `${scarpNum}.xls`
        );
      } catch (error) {
        this.$message.error("服务器繁忙")
        console.log(111111, error.message);
      }
    }
  },
  computed: {
    newlist() {
      return this.newlist1.slice((this.page - 1) * 10, this.page * 10);
    }
  },
  watch: {
    scarpFillTime() {
      this.fetch();
    }
  }
};
</script>
<style lang="less" scoped></style>
